<template>
	<view class="work-container">
		<scroll-view class="scroll-view_H" scroll-x="true" >
			<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
				:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view>
		</scroll-view>
		<!-- 内容切换 -->
		<view class="contentView">
			<view class="content" v-if="navIndex==0">
				<gas-page></gas-page>
			</view>
			<view class="content" v-if="navIndex==1">
				<!-- 气体交换机 -->
				<fans-page></fans-page>
			</view>
			<view class="content" v-if="navIndex==2">
				<!-- 温湿度终端 -->
				<ws-page></ws-page>
			</view>
			<view class="content" v-if="navIndex==3">
				<!-- 自动饲喂机 -->
				<aotufeeding-page></aotufeeding-page>
			</view>
			<view class="content" v-if="navIndex==4">
				<!-- 自动刮粪机 -->
				<scrape-page></scrape-page>
			</view>
		</view>
		
	</view>

</template>

<script>
	import GasPage from '@/pages/hmy/gas/index.vue'
	import FansPage from '@/pages/hmy/fans/index.vue'
	import WsPage from '@/pages/hmy/ws/index.vue'
	import AotufeedingPage from '@/pages/hmy/autofeeding/index.vue'
	import ScrapePage from '@/pages/hmy/scrape/index.vue'
	
	export default {
		components: {
		    GasPage,
		    FansPage,
		    WsPage,
		    AotufeedingPage,
		    ScrapePage
		},
		data() {
			return {
				navIndex: 0,
				tabBars: [
					{
						name: '气体检测仪',
						id: 'gas'
					}, {
						name: '气体交换机',
						id: 'fans'
					}, {
						name: '温湿度终端',
						id: 'ws'
					}, {
						name: '自动饲喂机',
						id: 'aotufeeding'
					}, {
						name: '自动刮粪机',
						id: 'scrape'
					},
				],
			}
		},
		methods: {
			checkIndex(index) {
				//console.log(index)
				this.navIndex = index;
			},
		}
	}
</script>

<style scoped lang="scss">
	/* #ifndef APP-NVUE */
	page {
	  display: flex;
	  flex-direction: column;
	  box-sizing: border-box;
	  background-color: #fff;
	  min-height: 100%;
	  height: auto;
	}
	
	view {
	  font-size: 16px;
	  line-height: inherit;
	}
	
	/* #endif */
	.activite {
		color:#00aaff;
		border-bottom: 1px solid #00aaff;
		
	}
	
	.contentView{
		padding : 5px
	}

	.content {
		/* background: #008000; */
		//height: 300px;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 100%;
		color: #000000;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 30%;
		height: 100%;
		line-height: 100%;
		text-align: center;
		padding: 10px 0;
	}
</style>
